<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        display: flex;
        justify-content: space-between;
        width: 800px;
        margin-top: 10px;
        margin-left: 200px;
        position: relative;
      }
      .text {
        color: red;
        margin-left: 200px;
        margin-top: 80px;
      }

      .Slider1,
      .Slider2 {
        margin-top: 10px;
        width: 810%;
        height: 20px;
        background-color: pink;
        border-radius: 30px;
      }
      .Slider1 {
        position: absolute;
        top: 0%;
        left: 0%;
        /* transform: translateX(-50%); */
        max-width: 810px;
        width: 0%;
        background-color: blue;
      }
      .SliderBtn {
        position: absolute;
        top: 0;
        left: 0%;
        transform: translate(-50%, 15%);
        background-color: aqua;
        width: 30px;
        height: 30px;
        border-radius: 30px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div class="text">分数：<span>0</span>分</div>
    <div class="box">
      <div class="Slider1"></div>
      <div class="SliderBtn"></div>
      <div class="Slider2"></div>
    </div>
    <script>
            const box = document.querySelector('.box')
            const btn = document.querySelector('.SliderBtn')
            const Slider1 = document.querySelector('.Slider1')
            const text = document.querySelector('.text span')
            const body = document.querySelector('body');
            box.addEventListener('click', function (e) {
              btn.style.position = 'absolute'
              if (e.clientX < 1015 && e.clientX > 200) {
                btn.style.left = `${e.clientX - 200}px`
                Slider1.style.width = `${e.clientX - 200}px`
                let num = ((e.clientX - 200) / 800) * 101
                text.innerHTML = Math.trunc(num) > 101 ? 100 : Math.trunc(num)
              }
            })
            // btn.addEventListener('click', function (e) {
              btn.onmousedown = function(){
                document.onmousemove  = function(e){
                  btn.style.position = 'absolute'
              if (e.clientX < 1015 && e.clientX > 200) {
                btn.style.left = `${e.clientX - 200}px`
                Slider1.style.width = `${e.clientX - 200}px`
                let num = ((e.clientX - 200) / 800) * 101
                text.innerHTML = Math.trunc(num) > 100 ? 100 : Math.trunc(num)
              }
                }
              }
              document.onmouseup = function(){
                document.onmousemove = null 
              }
               
            
            // })
            
    </script>
  </body>
</html>
